<template>
    <div class="dialog_content">
        <el-form label-position="top">
            <el-form-item :label="$t('msg.备注名')">
                <el-input v-model="remarkName" :placeholder="$t('msg.请输入备注名')" class="item_input"></el-input>
            </el-form-item>
        </el-form>
        <div class="footer">
            <el-button type="primary" @click="submit">{{ $t('live.确定') }}</el-button>
            <el-button type="primary" plain @click="$emit('close')">{{ $t('chat.取消') }}</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SetRemark',
    props: {
        user_id: {
            type: [Number, String],
            default: ""
        },
        im_id: {
            type: [Number, String],
            default: ""
        }
    },
    watch: {
        im_id: {
            handler(v, n) {
                this.searchUser()
            },
            immediate: false
        }
    },
    data() {
        return {
            user: {},
            remarkName: ""
        }
    },
    created() {
        this.searchUser()
    },
    methods: {
        async searchUser() {
            let { user } = await this.$api.chatApi.searchUser({
                im_user_id: this.im_id
            });
            this.user = user;
            this.remarkName = user.remark || user.nickname;
        },
        async submit() {
            if (!this.remarkName.trim()) {
                this.$message({
                    message: this.$t('msg.请输入备注名'),
                    type: 'error'
                });
                return
            }
            await this.$api.chatApi.updateFriend({
                friend_user_id: this.user_id,
                remark: this.remarkName,
                firend_not_see_him: this.user.firend_not_see_him,
                friend_not_see_me: this.user.friend_not_see_me
            })

            // this.$store.dispatch("message/updateContacts", {
            //     id: this.im_id,
            //     displayName: this.remarkName
            // })

            this.$message({
                message: this.$t('msg.保存成功'),
                type: 'success'
            });

            this.$emit('ok');


            // let friend_id = this.detail?.friend?.friend_id ?? '';
            // this.$api.friendApi.setNickname({
            //     friend_id: friend_id,
            //     nickname: this.remarkName
            // }).then(async (res) => {
            //     if (res.code == 0) {
            //         await this.$api.chatApi.updateFriend({
            //             friend_user_id: this.user_id,
            //             remark: this.remarkName
            //         })
            //         this.$store.dispatch("message/updateContacts", {
            //             id: this.detail.user_id,
            //             displayName: this.remarkName
            //         })

            //         this.$message({
            //             message: this.$t('msg.保存成功'),
            //             type: 'success'
            //         });

            //         this.$emit('ok');
            //     }
            // })
        }
    }
}
</script>

<style lang="scss" scoped>
.dialog_content {
    .el-form-item {
        margin-bottom: 16px;

        .el-form-item__label {
            font-size: 14px;
            color: #7F7F7F;
            padding: 0 0 8px 0;
        }

        .item_input {
            .el-input__inner {
                height: 52px;
                font-size: 16px;
                color: #333333;
                font-weight: 500;
                background: #F5F5F5;
            }
        }
    }
}

.footer {
    .el-button {
        width: 118px;
        height: 32px;
    }
}
</style>